<template>
    <bs-dialog :title="$t('背景图片选择')" :visible.sync="editor" size="default" @closed="doCloseEdit" @opened="init" class="bgChoiceDialog">
        <template slot="main">
            <el-form :model="queryForm" :inline="true" ref="editorFormRef" size="small">
                <el-form-item :label="$t('名称')">
                    <el-input
                    v-model="queryForm.imageName"
                    autocomplete="off"
                    show-word-limit
                    clearable
                    style="width:275px"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select-tree
                        ref="elSelectTree"
                        :placeholder="$t('我的媒体')"
                        :props="props"
                        :data="treeData"
                        :disabled-values="disabledValues"
                        :check-strictly="true"
                        style="width:275px"
                        @change="changeSelectTree"
                    ></el-select-tree>
                </el-form-item>
                <el-form-item>
                    <bs-search-button-icon @click.native="loadMediaData"></bs-search-button-icon>
                </el-form-item>
                <el-form-item style="margin-left:10px;">
                    <el-checkbox v-model="pixel">{{ $t('匹配分辨率') }}</el-checkbox>
                </el-form-item>
            </el-form>
                <mini-panel
                    ref="bgMiniPanel"
                    class="mini-panel-center"
                    :datas="mediaData"
                    @dbClick="dbClick"
                     />
        </template>

        <template slot="footer">
            <bs-confirm-button-icon @click.native="doSave"></bs-confirm-button-icon>
            <bs-cancel-button-icon @click.native="doCloseEdit"></bs-cancel-button-icon>
        </template>
  </bs-dialog>
</template>

<script>
import MiniPanel from '../../components/MiniPanel'
import MediaApi from '@/api/media'

export default {
    data() {
        return{
            queryForm: {
                width: 0,
                height: 0
            },
            mediaData: [],
            editor: false,
            props: {
                value: 'id',
                label: "name",
                owner: 'owner',
                isLeaf: 'hasChild'
            },
            treeData: [],
            disabledValues:[],
            pixel: false,
            width: 0,
            height: 0
        }
    },
    components: {
        MiniPanel
    },
    created() {
        this.$eventBus.$on('showBgChioceDialog', this.show)
    },
    beforeDestroy() {
        this.$eventBus.$off('showBgChioceDialog')
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    watch: {
        pixel(val) {
            if(val) {
                this.queryForm.width = this.width
                this.queryForm.height = this.height
            } else {
                this.queryForm.width = 0
                this.queryForm.height = 0
            }
        }
    },
    methods: {
        init() {
            this.queryForm = {
                width: 0,
                height: 0
            }
            this.loadTreeData()
            this.loadMediaData()
        },
        // 加载我的媒体
        async loadTreeData() {
             this.treeData = [{
                id: 0,
                name: this.$t('我的媒体'),
                children: []
            },{
                id: -1,
                name: this.$t('下级用户媒体'),
                children: []
            },{
                id: -2,
                name: this.$t('其它媒体'),
                children: []
            }]
            let res = await MediaApi.getCatalogue({type: 1})
            if(res) {
                res.forEach(item => {
                    this.treeData[0].children.push(item)
                })
            }
            res = await MediaApi.getFollow({type: 1})
            if(res) {
                res.forEach(item => {
                    this.treeData[1].children.push(item)
                })
            }
            res = await MediaApi.getOtherMedia({type: 1})
            if(res) {
                res.forEach(item => {
                    this.treeData[2].children.push(item)
                })
            }
        },
        async loadMediaData() {
            const res = await MediaApi.loadBackgroudImg(this.queryForm)
            if(res) {
                this.mediaData = res.filter(item => {
                    if(item.validity) {
                        item.showType = 'backgroud'
                        return item
                    }
                })
            }
        },
        show(w, h) {
            this.width = w
            this.height = h
            this.editor = true
        },
        doSave() {
            let item = this.$refs.bgMiniPanel.getActiveItem()
            this.doChioceImg(item)
        },
        doChioceImg(item) {
            if(item) {
                if(item.thumbnailFile !== '') {
                    this.$eventBus.$emit('changeAttr', 'bgimageId', item.id)
                    this.$eventBus.$emit('changeAttr', 'bgimage', item.path)
                }
                this.editor = false
            } else {
                this.$alert('提示', '请选择背景图片')
            }
        },
        doCloseEdit() {
            this.editor = false
        },
        changeSelectTree(val) {
            const node = this.$refs.elSelectTree.$refs.elTree.getCurrentNode()
            if (node.id === -1 || node.id === -2) {
                this.$delete(this.queryForm, 'ownerUserId')
                this.$delete(this.queryForm, 'folderId')
                return
            }
            if(node.ownerUserId) {
                this.queryForm.ownerUserId = node.ownerUserId
                this.queryForm.folderId = node.id ? node.id : 0
            } else {
                this.$delete(this.queryForm, 'ownerUserId')
                this.queryForm.folderId = node.id
            }
        },
        dbClick(item) {
            this.doChioceImg(item)
        }
    }
}
</script>

<style lang="scss" scoped>
.bgChoiceDialog {
    ::v-deep .el-dialog {
        height: 650px !important;
    }
    ::v-deep .el-form--inline {
        padding-top: 15px !important;
    }
    ::v-deep .mini-panel-center {
        max-height:calc(48vh) !important;
        overflow-y: scroll !important;
        padding: 0px !important;
    }
}
</style>
